<template>
  <div class="excel-container">
    <UploadExcel :on-success="onSuccess" :before-upload="beforeUpload" />
  </div>
</template>

<script>
import { batchEmployee } from '@/api'
import UploadExcel from '@/components/UploadExcel'
import { formatDate } from '@/utils/index'
// 表格上传功能的引入
//  1.vue-element-admin 项目中表格上传的功能
//  2.根据当前页面的URL 找到对应的路由
//  3.根据路由中的component 找到对应的页面
//  4.分析页面的组成找到表格上传的组件 和上传组件的配置属性
//  5.根据组件引入的路径找到组件的位置
//  6.将表格上传组件整体cv过来
//  7.安装依赖
//  8.组件的引入
//  9.在代码中配置组件属性 on-success before-upload
export default {
  name: 'ImportExcel',
  components: {
    UploadExcel
  },
  methods: {
    // 上传之后的回调
    async onSuccess({ results, header }) {
      // results：表体数据
      // header：表头数据
      console.log('上传完成', results, header)
      // 在成功的位置调用接口
      const headerRelation = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '工号': 'workNumber',
        '聘用形式': 'formOfEmployment',
        '部门': 'departmentName',
        '转正部门': 'correctionTime'
      }
      // 将解析出来的excel 数据中的表体数据的key 换成英文
      const data = this.getImportData(results, headerRelation)
      await batchEmployee(data)
      this.$message.success('成功导入表格')
      // 导入成功之后跳转回员工管理页面
      this.$router.push('/employee')
    },
    // 将表格上传的中文转换成英文 转换数组中的每一项的对象的 key 值的方法
    getImportData(results, headerRelation) {
      // results 表体数据
      // headerRelation 字段的中英对照关系
      const resArr = []
      results.forEach(item => {
        const obj = {}
        // Object.keys() 方法 用于获取所有的key返回有这个key组成的数组
        Object.keys(item).forEach(key => {
          // 表格上传的时间会被转化成和1900年1月0日的天数差值
          if (['timeOfEntry', 'correctionTime'].includes(headerRelation[key])) {
            obj[headerRelation[key]] = formatDate(item[key], '-')
          } else {
            // 如果不是时间类型的字段直接复制就行
            obj[headerRelation[key]] = item[key]
            console.log(headerRelation[item])
          }
        })
        resArr.push(obj)
      })
      return resArr
    },
    // 上传之前的文件校验
    // 如果校验通过返回true
    // 如果校验失败返回false
    beforeUpload(file) {
      console.log('上传前', file)
      // 文件大小超过 1M 不允许导入
      const isLt1M = file.size / 1024 / 1024 < 1 // 小于1M
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '文件体积不能超过1M',
        type: 'warning'
      })
      return false
    }

  }
}
</script>
